<template>
	<view class="content">
		<view class="tips" :class="merchat.applicationStatus==1?'on':''" v-if="merchat.applicationStatus==0 || merchat.applicationStatus==1">{{merchat.applicationStatus==0?'正在申请中':'申请通过'}}</view>
		<view class="tips fail" v-if="merchat.applicationStatus==2">审核失败:{{merchat.memo}}</view>
		<view class="row b-b">
			<text class="tit">姓名</text>
			<input class="input" :maxlength="10" type="text" v-model="merchat.contactName" v-if="merchat.applicationStatus==0 || merchat.applicationStatus==1" disabled placeholder="请输入联系人" placeholder-class="placeholder" />
			<input class="input" :maxlength="10" type="text" v-model="merchat.contactName" v-else placeholder="请输入联系人" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">电话</text>
			<input class="input" type="number" v-model="merchat.mobileNo" placeholder="请输入电话" placeholder-class="placeholder" v-if="merchat.applicationStatus==0 || merchat.applicationStatus==1" disabled />
			<input class="input" type="number" v-model="merchat.mobileNo" placeholder="请输入电话" placeholder-class="placeholder" v-else />
		</view>
		
		<view class="row b-b">
			<text class="tit" style="white-space:nowrap; width: 160rpx;">身份证号码</text>
			<input class="input" type="number" v-model="merchat.idcardNo" placeholder="请输入身份证号码" placeholder-class="placeholder" v-if="merchat.applicationStatus==0 || merchat.applicationStatus==1" disabled />
			<input class="input" type="number" v-model="merchat.idcardNo" placeholder="请输入身份证号码" placeholder-class="placeholder" v-else />
		</view>
		

		
		<view style="height: auto; font-size: 30upx; padding: 0 30upx;">
			<view class="tit" style=" width: 100%;">身份证正面</view>
			<image class="idcardImg" v-if="merchat.idcardImgFront !=''" :src="merchat.idcardImgFront" @click="changeAvatar('Front')" ></image>
			
			<view  class="idcardImg" v-if="merchat.idcardImgFront ==''" @click="changeAvatar('Front')"  >
				点击上传身份证正面照
			</view>
		</view>
		
		<view style="height: auto; font-size: 30upx; padding: 0 30upx; margin-top: 20upx;">
			<view class="tit" style=" width: 100%;">身份证反面</view>
			<image class="idcardImg" v-if="merchat.idcardImgBack !=''" :src="merchat.idcardImgBack" @click="changeAvatar('Back')"></image>
			
			<view  class="idcardImg" v-if="merchat.idcardImgBack ==''" @click="changeAvatar('Back')"  >
				点击上传身份证正面照
			</view>
		</view>
		<view style="padding: 10upx 30upx;" >
		 请阅读<text style="color:#5076d7;" @click="goRead('1')">《用户服务协议》</text>及<text style="color: #5076d7;" @click="goRead('2')">《隐私政策》</text>
		</view>
		
		

		<button class="add-btn"  @click="confirm" v-if="merchat.applicationStatus!=0 && merchat.applicationStatus!=1">提交</button>

	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				manageType:'',
				merchat: {
					userUuid: '',
					mobileNo: '',
					contactName: '',
					idcardNo:'',
					idcardImgFront:'',
					idcardImgBack:'',
				},
				adress:''
			}
		},
		onLoad(option){
			
			
			
			this.$api.request.inquiryUserApplication({'userUuid':this.userInfo.userUuid}, res => {
				console.log(res.body.data.applications)
				if (res.body.data.applications.length != 0) {
					this.merchat=res.body.data.applications[0];
					if(this.merchat.applicationStatus=="0"){
						this.$api.msg('正在申请中');
					}
					if(this.merchat.applicationStatus=="1"){
						this.$api.msg('申请通过');
					}
					if(this.merchat.applicationStatus=="2"){
						this.$api.msg('审核失败');
					}
					// setTimeout(()=>{
					// 	uni.navigateBack();
					// }, 500)
				}
			});
			
		},
		onShow(){
			uni.$on('updatecoordinates',this.updatecoordinates)
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		
		components:{
			wPicker
		},
		
		onShareAppMessage: function (e) {
		    var title = '家居大众点评';
		    var imageUrl = 'https://api.zhaimejia.cn/miniStatic/share.jpg';
		    var path= ''
		    
		    let obj = {
		      title,
		      imageUrl,
		      path: path,
		      success: function (res) {
		        console.log('点击页面内的分享按钮--onShareAppMessage分享成功', res)
		      },
		      fail(err) {
		        console.log('点击页面内的分享按钮--onShareAppMessage-fail', err)
		      }
		    }
		    return obj
		  },
		  onShareTimeline: function(res){
		    var title = '家居大众点评';
		    var imageUrl = 'https://api.zhaimejia.cn/miniStatic/share.jpg';
		    var path= ''
		    
		    let obj = {
		      title,
		      imageUrl,
		      path: path,
		      success: function (res) {
		        console.log('点击页面内的分享按钮--onShareAppMessage分享成功', res)
		      },
		      fail(err) {
		        console.log('点击页面内的分享按钮--onShareAppMessage-fail', err)
		      }
		    }
		    return obj
		},
		methods: {
			goRead(e){
			let type=e
			console.log('e==>',e)
			let url=''
			if(type=='1'){
				url='/pages/gomerchant/ServiceAgreement'
			}
			if(type=='2'){
			 	url='/pages/gomerchant/PrivacyPolicy'
			}
			console.log('url',url)
			
			uni.navigateTo({
				url
			})
			  
			},
			updatecoordinates(e){
				this.merchat.province = e.coordinates.pname
				this.merchat.city = e.coordinates.cityname
				this.merchat.district = e.coordinates.adname
				this.merchat.latitude = e.coordinates.latitude
				this.merchat.longitude = e.coordinates.longitude
				this.merchat.merchantAddress=e.coordinates.address
				this.adress=e.coordinates.pname+" "+e.coordinates.cityname+" "+e.coordinates.adname+" "+e.coordinates.address

				console.log(e)
    		},
			showAddressRegion(){
				this.$refs['region'].show();
			},
			// onConfirm(val){
			// 	this.$set(this.merchat,'province',val.checkArr[0]);
			// 	this.$set(this.merchat,'city',val.checkArr[1]);
			// 	this.$set(this.merchat,'area',val.checkArr[2]);
			// },
			
			//地图选择地址
			// chooseLocation(){
			// 	uni.chooseLocation({
			// 		success: (data)=> {
			// 			// debugger
			// 			this.merchat.addressName = data.name;
			// 		}
			// 	})
			// },
			goadress(){
				uni.navigateTo({
					url: '/pages/gomerchant/map'
				})
			},
			//提交
			confirm(){
				let data = this.merchat;

				if(data.contactName ==''){
					this.$api.msg('请输入姓名');
					return;
				}
				if(!this.$api.util.validateMobileNo(data.mobileNo)){
					this.$api.msg('请输入正确的电话号码');
					return;
				}
				if(data.idcardNo == ''){
					this.$api.msg('请输入身份证号码');
					return;
				}
				
				if(data.idcardImgFront == ''){
					this.$api.msg('请上传身份证正面照');
					return;
				}
				if(data.idcardImgBack == ''){
					this.$api.msg('请上传身份证反面照');
					return;
				}
				
				let options = this.merchat;
				
				options.userUuid=this.userInfo.userUuid
				// console.log(options)
				this.$api.request.applyBd(options, res => {
					console.log(res)
					if (res.body.status.statusCode === '0') {
						this.$api.msg('提交成功');
						setTimeout(()=>{
							uni.navigateBack();
						}, 800)
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				});
				
			},
			//上传图片
			changeAvatar(isname) {
				if(this.merchat.applicationStatus==0 || this.merchat.applicationStatus==1){
					return
				}
				this.$api.request.uploadImage(1, uploadRes => {
					if (uploadRes.errno === 0) {
						//上传成功后获取地址并更新该地址到服务器
						var photoUrl = uploadRes.data[0];
						// console.log(photoUrl)
						if(isname =='Front'){
							this.merchat.idcardImgFront=photoUrl
						}else{
							this.merchat.idcardImgBack=photoUrl
						}
					} else {
						this.$api.msg('上传图片失败');
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff;
		/*padding-top:40upx;*/
	}

	.tips{line-height: 80upx;text-align: center;font-size: 28upx;margin-bottom: 40upx;color: #fff;background-color: #e6a23c;}
	.tips.on{background-color: #67c23a;}
	.tips.fail{background-color: #5076d7;}
	.row{
		display: flex;
		align-items: center;
		position: relative;
		padding:0 30upx;
		height:80upx;
		background: #fff;
		margin-bottom: 30upx;
		.tit{
			flex-shrink: 0;
			width: 110upx;
			font-size: 30upx;
			color: $font-color-dark;
		}
		.input{
			flex: 1;
			font-size: 30upx;
			height: 80upx;
			line-height: 80upx;
			background-color: #F7F7F7;
			padding: 0 20upx;
			padding-right: 40upx;
			/*overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;*/
			color: $font-color-dark;
		}
		.input2{
			padding: 20upx;
			line-height: 40upx;
			min-height: 120upx;
			font-size: 28upx;
			height: auto;
			white-space:normal;
		}
		.goadress{
			width: 131upx;
			height: 80upx;
			line-height: 80upx;
			color: #7B7B7D;
			font-size: 28upx;
			text-align: center;
			background: #F7F7F7;
			border-radius: 2upx;
			margin-left: 10upx;
			image{
				width: 24upx;
				height: 32upx;
				display: inline-block;
				vertical-align: middle;
				margin-right: 10upx;
			}
		}
		.icon-shouhuodizhi{
			font-size: 36upx;
			color: $font-color-light;
			
		}
		.yticon{
			position: absolute;
			z-index: 10;
			top: 0;
			bottom: 0;
			margin: auto;
			right: 40upx;
			line-height: 80upx;
		}

	}
	.b-b:after, .b-t:after{
		display: none;
	}
	.default-row{
		margin-top: 16upx;
		.tit{
			flex: 1;
		}
		switch{
			transform: translateX(16upx) scale(.9);
		}
	}
	.add-btn{
		// display: flex;
		// align-items: center;	
		// justify-content: center;
		width: 650upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: #5076d7;
		border-radius: 40upx;
		// position: absolute;
		// z-index: 10;
		// left: 0;
		// right: 0;
		margin: 50upx auto;
		// bottom: 20upx;
	}
	.del-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba( 80, 118, 215,0.4);
	}
	
	
	.tab{
		padding:20upx 0;
		font-size: 32upx;
	}
	.tab.active{
		color:#5076d7;
	}
	.result{
		margin-top: 100upx;
		font-size: 32upx;
	}
	.idcardImg{
		margin-top: 20upx;
		width: 100%;
		height: 400upx;
		text-align: center;
		line-height:400upx;
		border:2upx solid #5076d7;
	}
	
</style>
